<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:b="http://bootsfaces.net/ui"
      xmlns:a4j="http://richfaces.org/a4j">

    <h:head>
        <title>.: Supermercado Kwik-E-Mart :.</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <h:outputStylesheet name="css/app.css" ></h:outputStylesheet>
        <h:outputStylesheet library="css" name="bootstrap-theme.min.css" ></h:outputStylesheet>
        <h:outputStylesheet library="css" name="bootstrap.min.css" ></h:outputStylesheet>

    </h:head>

    <h:body class="fondoPagin">
        <div id="wrap" >
            <h:panelGroup id="panelheader">
                <ui:include src="template/Header.xhtml" />
            </h:panelGroup>
            <h:form>

                <div class="container" style="padding-bottom: 100px;">
                    <div class="container">
                        <br/>
                        <div style="width: 97%; text-align: center">
                            <div style="text-align: center;">
                                <div class="alert alert-success" role="alert" style="text-align: center;"> <h3> Pedidos</h3></div>
                            </div>
                            <h:panelGroup rendered="#{sessionBean.clienteSesion == null}">
                                <div class="alert alert-info" role="alert" style="text-align: center;"> <h3>! Debes iniciar sesion !</h3></div>
                            </h:panelGroup>
                            <h:panelGroup rendered="#{sessionBean.clienteSesion != null and sessionBean.clienteSesion.pedidoList.size() == 0}">
                                <div class="alert alert-info" role="alert" style="text-align: center;"> <h3>! Aun no haz realizado ningun pedido!</h3></div>
                            </h:panelGroup>
                            <h:panelGroup rendered="#{sessionBean.clienteSesion != null and sessionBean.clienteSesion.pedidoList.size() > 0}">
                                <div class="panel panel-default" >
                                    <!-- Default panel contents -->
                                    <div class="panel-primary"  ><h3 style="text-align: center; color: #d43f3a">Listado de Pedidos</h3></div>

                                    <!-- Table -->
                                    <table class="table" id="PanelLista">
                                        <thead>
                                            <tr>
                                                <th>Numero de pedido</th>
                                                <th>Ciudad de envio</th>
                                                <th>Direccion de envio</th>
                                                <th>Fecha de realizacion pedido</th>
                                                <th>Total Pedido</th>
                                                <th>Ver detalle pedido</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <a4j:repeat  value="#{sessionBean.clienteSesion.pedidoList}" var="cap"  id="repeat" >
                                                <tr>
                                                    <td><div style="text-align: center">#{cap.idPedido}</div></td>
                                                    <td><div style="text-align: center">#{cap.ciudadEnvio}</div></td>
                                                    <td>#{cap.direccionEnvio}</td>
                                                    <td>
                                                        <h:outputText value="#{cap.fecha}">
                                                            <f:convertDateTime type="date" pattern="dd-MM-yyyy" locale="es-CO" />
                                                        </h:outputText>
                                                    </td>
                                                    <td><h:outputText value="#{(cap.totalFactura)}"></h:outputText></td>
                                                    <td><a4j:commandButton style="  border-radius: 15px 15px 15px 15px;
                                                                           font-size: 12px;
                                                                           background-color: #dd0a07;
                                                                           color: #ffffff;
                                                                           box-shadow: inset 0px 0px 100px #069;
                                                                           "  
                                                                           render="detallePedido"
                                                                           oncomplete="#{rich:component('detallePedido')}.show()"
                                                                           actionListener="#{perfilClienteBean.settearCurrentPedido(cap)}" value="Ver detalle" ></a4j:commandButton></td>

                                                </tr>
                                            </a4j:repeat>
                                        </tbody>
                                    </table>
                                </div>

                            </h:panelGroup>
                        </div>
                    </div>
                </div>

            </h:form>
        </div>
        <div id="footer">
            <ui:include src="template/Footer.xhtml" />
        </div>

        <rich:popupPanel id="detallePedido" width="600" height="400" modal="true">
            <f:facet name="controls">

            </f:facet>
            <f:facet name="header">
                <h3 style="text-align: center; color: #069; font-family: serif">Pedido N° #{perfilClienteBean.currentPedido.idPedido}</h3>
            </f:facet>
            <h:form id="detallePedidoForm">
                <a4j:region id="detallePedidoForm">
                    <br/>
                    <div class="panel panel-default" >
                        <!-- Default panel contents -->
                        <div class="panel-primary"  ><h3 style="text-align: center; color: #069">Listado de productos</h3></div>
                        <!-- Table -->
                        <table class="table" id="PanelLista">
                            <thead>
                                <tr>
                                    <th>Nombre del producto </th>
                                    <th>Cantidad del producto</th>
                                    <th>Precio del producto</th>

                                </tr>
                            </thead>
                            <tbody>
                                <a4j:repeat  value="#{perfilClienteBean.currentPedido.detallePedidoList}" var="produc"  id="repeatDetalle" >
                                    <tr>
                                        <td><div style="text-align: center">#{produc.idProducto.nombreProducto}</div></td>
                                        <td><div style="text-align: center">#{produc.cantidad}</div></td>
                                        <td>#{ produc.costo }</td>

                                    </tr>
                                </a4j:repeat>
                            </tbody>
                        </table>
                    </div>
                    <h:panelGroup style="margin-left: 40%;">
                        <h:commandButton style="text-align: center;
                                         font-size: 15px;
                                         border-radius: 15px 0px 0px 15px; 
                                         /*                                text-shadow: 1px 2px 2px #D1E3CF;*/
                                         /*                                background: #ffffff;*/
                                         /*                                border: 1px #ffffff;*/
                                         color: #ffffff;
                                         font-family: serif;
                                         box-shadow: inset 54px 54px 100px #069;"  value="Aceptar" ></h:commandButton>
                    </h:panelGroup>
                </a4j:region>
            </h:form>
        </rich:popupPanel>
    </h:body>
</html>